<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="950px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <div class="disFlxAC">
      <div class="mr-20">添加疾病辩证路径</div>
      <el-select
        v-model="getParams.syndromeType"
        @change="handleChangeType"
        style="width: 110px"
        class="borderRight0"
      >
        <el-option label="中医辨证" value="0"></el-option>
        <el-option label="贴敷辨证" value="1"></el-option>
      </el-select>

      <el-select
        v-model="checkedId"
        v-loadMore="selectLoadMore"
        filterable
        remote
        placeholder="请输入编码/西医/中医病名/首字母搜索选择"
        clearable
        @change="handleChange"
        :remote-method="remoteMethod"
        :loading="loading"
        style="flex: 1"
        class="borderLeft0"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.diseaseName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>

    <div class="mt-20">
      <div>已关联疾病辩证路径列表</div>
      <el-table :data="illnessList" border>
        <el-table-column label="西医病名" align="center" prop="diseaseName" />
        <el-table-column
          label="中医病名"
          align="center"
          prop="tcmDiseaseName"
        />
        <el-table-column label="辨证路径" align="center" width="100">
          <template slot-scope="{ row }">
            <span v-if="row.syndromeType === 0">中医辨证</span>
            <span v-if="row.syndromeType === 1">贴敷辨证</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际辩证次数"
          align="center"
          prop="quoteCount"
          width="100"
        />
        <el-table-column label="状态" align="center" width="140">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status === 1">启用</el-tag>
            <el-tag v-else-if="row.status === 0" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关联时间" prop="assocTime" align="center" width="160" />
        <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row.assocId)"
            >移除关联</el-button
          >
        </template>
      </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { getDiseaseList } from "@/api/saas/tcm.js";
import { getExpertAssocList, addExpertAssoc, deleteExpertAssoc } from '@/api/expert/expert.js'
import { arrayUnique } from '@/utils/ruoyi'

export default {
  data() {
    return {
      title: "新增证型",
      open: false,

      options: [],
      getParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        syndromeType: "0",
      },
      total: 0,
      loading: false,

      // 已选择疾病查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        expertId: undefined
      },
      checkedId: undefined, // 选中的ID
      illnessList: [], // 已添加的疾病列表
    }
  },
  async created() {
    await this.getList();
  },
  methods: {
    async getList() {
      // 只获取省区处方模版
      const { rows, total } = await getDiseaseList(this.getParams);
      this.total = total;
      if (this.getParams.pageNum === 1) { this.options = [] };
      this.options = arrayUnique([...this.options, ...rows], 'id');
    },
    // 下拉加载更多
    selectLoadMore() {
      if (this.options.length < this.total) {
        this.getParams.pageNum++;
        this.getList();
      }
    },
    async remoteMethod(query) {
      this.loading = true;
      this.getParams.pageNum = 1;
      this.getParams.pageSize = 10;
      this.getParams.keyword = query;
      await this.getList();
      this.loading = false;
    },
    handleChangeType(e) {
      this.checkedId = undefined;
      this.remoteMethod('')
    },
    handleChange(id) {
      if (!id) return
      const that = this;
      addExpertAssoc({ expertId: this.queryParams.expertId, diseaseId: id }).then(()=>{
        that.$message.success('添加成功');
        that.checkedId = undefined;
        that.getTableData()
      })
    },
    getTableData() {
      getExpertAssocList(this.queryParams).then(res=>{
        this.illnessList = res.rows;
      })
    },
    handleDelete(assocId){
      deleteExpertAssoc({assocId}).then(()=>{
        this.$message.success('移除成功');
        this.getTableData()
      })
    },
    openModal(expertId) {
      this.queryParams.expertId = expertId
      this.getTableData();
      this.open = true;
    },
    closeModal() {

    }
  }
}
</script>

<style lang="scss" scoped>
</style>
<style scoped>
.borderRight0 >>> .el-input__inner{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.borderLeft0 >>> .el-input__inner{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
